What is scroll anchoring?

Scroll anchoring adjusts the scroll position to compensate for the changes outside of the viewport. This means that the point in the document the user is looking at remains in the viewport, which may mean their scroll position actually changes in terms of how far they have moved through the document. How do I turn on scroll anchoring? You don't!

What is anchor positioning?

But anchor positioning takes care of the layout updates for us. You don't have to only anchor to one element. You could use many anchors for an element. You might have noticed that in the bar chart example. The tooltips were anchored to the chart and then the appropriate bar.

What is an anchor element in JavaScript?

Anchor element: The anchor-name of the anchor to use—or, you can omit the value to use an implicit anchor. It can be defined via the HTML relationship, or with an anchor-default property with an anchor-name value. Anchor side: A keyword of the position you want to use. This could be top, right, bottom, left, center, etc.

Can anchor elements be siblings?

The rule is that the elements can't be siblings. In that case, you can wrap the anchor with a container that has relative positioning. Then you can anchor to it. Check out this demo where you can drag the anchor around and the boat will follow. In some cases, your anchor element might be within a scrolling container.